<template>
	<div>
		<van-nav-bar title="我的" />
		<!-- 骨架屏  -->
		<van-skeleton v-if="flag" title avatar :row="2" avatar-size="64" />
		<div v-else class="user">
			<div class="user_l">
				<!-- 头像 -->
				<van-image round width="10rem" height="10rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
					class="img" />
			</div>
			<!-- 个人信息 -->
			<div class="user_r">
				<ul>
					<!-- 用户名存储在 pinia中 -->
					<li><span>姓名：{{ store.username }}</span></li>
					<li><span>邮箱:2873670981@qq.com</span></li>
					<li><span>签名:凹凸曼</span></li>
				</ul>
			</div>
		</div>
		<!-- 导航区域 -->
		<!-- cell 单元格 路由跳转（ 我的订单页面 ）-->
		<van-cell title="我的订单" is-link to="/myorder" />
		<van-cell title="个人信息" is-link to="index" />
		<van-cell title="我的足迹" is-link to="index" />
		<van-cell title="会员管理" is-link to="index" />
		<van-cell title="关于个人" is-link to="index" />
	</div>
</template>
<script setup>
import { ref } from 'vue'
// 引入pinia
import { useCounterStore } from '@/stores/user'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// 定义骨架屏的显示与隐藏 优化（ 计时器 ）
let flag = ref(true)
setInterval(() => {
	flag.value = false
}, 2000)
</script>

<style lang="scss" scoped>
.user {
	width: 100%;
	height: 150px;

	// background-color: yellow;
	.user_l {
		width: 35%;
		height: 100%;
		// background-color: red;
		float: left;

		.img {
			margin: 20px 15px;
		}
	}

	.user_r {
		width: 65%;
		height: 100%;
		// background-color: skyblue;
		float: left;

		ul {
			margin: 10px;

			li {
				line-height: 40px;
			}
		}
	}
}
</style>